<template>
	<view class="supplier-list">
		<!-- 顶部导航 -->
		<custom-header title="今日入场" sticky />

		<!-- 时间选择器和搜索框 -->
		<view class="time-section">
			<view class="time-search-row">
				<!-- 搜索大框：包含地区和输入框 -->
				<view class="search-box">
					<view class="area-selector" @click="showAreaPicker">
						<text class="area-text">{{ selectedArea }}</text>
						<text class="area-arrow">▼</text>
					</view>
					<view class="divider"></view>
					<image class="search-icon" src="/static/home/cxtb.png" mode="aspectFit" />
					<input class="search-input" placeholder="供应商名称/商品名称" />
				</view>
				<!-- 时间选择器 -->
				<view class="time-selector" @click="showTimePicker">
					<text class="time-text">{{ selectedDate }}</text>
					<text class="time-arrow">▼</text>
				</view>
			</view>
		</view>

		<!-- Tab切换 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">
				<image v-if="activeTab === 'all'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">全部({{ tabCounts.all }})</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'notEntered' }" @click="switchTab('notEntered')">
				<image v-if="activeTab === 'notEntered'" class="tab-icon" src="/static/home/xzlk.png"
					mode="aspectFit" />
				<text class="tab-text">未入场({{ tabCounts.notEntered }})</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'entered' }" @click="switchTab('entered')">
				<image v-if="activeTab === 'entered'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">已入场({{ tabCounts.entered }})</text>
			</view>
		</view>

		<!-- 表格区域 -->
		<view class="table-card">
			<!-- 表格 -->
			<view class="table">
				<!-- 表头 -->
				<view class="table-row header-row">
					<text class="table-cell header-cell">供应商</text>
					<text class="table-cell header-cell">基地</text>
					<text class="table-cell header-cell">标签打印</text>
					<text class="table-cell header-cell">数量</text>
					<text class="table-cell header-cell">质检进度</text>
				</view>

				<!-- 数据行 -->
				<view class="table-row" v-for="(item, index) in currentData" :key="index"
					@click="goToSupplierDetail(item)">
					<view class="table-cell supplier-info">
						<view class="supplier-content">
							<text class="supplier-name">{{ item.supplierName }}</text>
							<text class="supplier-phone">{{ item.phone }}</text>
						</view>
					</view>
					<text class="table-cell">{{ item.baseName }}</text>
					<text class="table-cell">
						<text v-if="item.printStatus ==1">已打</text>
						<text v-else class="status-not-entered">未打</text>
					</text>
					<text class="table-cell">{{ item.quantity }}</text>
					<view class="table-cell status-cell" @click.stop="handleEntrance(item)">
						<text class="status-entered" v-if="item.status == 'entered'">已入场</text>
						<text class="status-not-entered" v-if="item.status == 'notEntered'">未入场</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 时间选择器组件 -->
		<custom-select-time :show="showTimeSelector" :defaultDate="selectedDate" @confirm="handleTimeConfirm"
			@update:show="handleTimePickerShow" @close="handleTimePickerClose" />
		<custom-select :show="showAreaSelector" :datas="areaList" @confirm="handleAreaConfirm"
			@update:show="handleAreaPickerShow" @close="handleAreaPickerClose" />
		
		<!-- 弹出层提示 -->
		<custom-toast 
			:show="isShowToast"
			:config="toastConfig"
			@cancel="hideToast"
			@confirm="confirmToast" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue'
	
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const { isShowToast,toastConfig,showToast,hideToast } = useToast()
	// 弹出层确认
	const confirmToast = (data)=>{
		console.log(data)
		// 取消入场
		if(data?.type == 'cancelEntered'){
			setTimeout(()=>{
				hideToast()
			},500)
		}
		// 确定入场
		else if(data?.type == 'confirmEntered'){
			setTimeout(()=>{
				hideToast()
			},500)
		}else{
			hideToast()
		}
	}

	// 页面参数
	const pageParams = reactive({
		type: 'all', // all, notEntered, entered
	})

	// 当前激活的Tab
	const activeTab = ref('all')

	// 时间选择器相关
	const showTimeSelector = ref(false)
	const selectedDate = ref('')

	// 区域选择器相关
	const showAreaSelector = ref(false)
	const selectedArea = ref('斗南片区')
	const areaList = ref(['斗南片区', '晋宁片区', '呈贡片区'])

	// Tab统计数据
	const tabCounts = reactive({
		all: 2222,
		notEntered: 20,
		entered: 2202
	})

	// 模拟数据
	const supplierData = reactive({
		all: [{
				supplierName: '洋洋花卉(晋宁)',
				phone: '13887478948',
				baseName: '寻甸基地',
				printStatus:'1',
				quantity: 42,
				status: 'entered'
			},
			{
				supplierName: '红豆花卉',
				phone: '19808806515',
				baseName: '斗南基地',
				printStatus:'2',
				quantity: 172,
				status: 'entered'
			},
			{
				supplierName: '旺旺鲜花',
				phone: '15555367333',
				baseName: '斗南基地',
				printStatus:'2',
				quantity: 318,
				status: 'notEntered'
			},
			{
				supplierName: '王氏花卉',
				phone: '18788571853',
				baseName: '昆阳基地',
				printStatus:'1',
				quantity: 88,
				status: 'entered'
			},
			{
				supplierName: '花间故事',
				phone: '18788571853',
				baseName: '通海基地',
				printStatus:'1',
				quantity: 1,
				status: 'entered'
			},
			{
				supplierName: '恰浩花卉',
				phone: '18788571853',
				baseName: '通海基地',
				printStatus:'1',
				quantity: 1,
				status: 'notEntered'
			},
			{
				supplierName: '恰浩花卉',
				phone: '18788571853',
				baseName: '通海基地',
				printStatus:'1',
				quantity: 1,
				status: 'notEntered'
			},
			{
				supplierName: '恰浩花卉',
				phone: '18788571853',
				baseName: '通海基地',
				printStatus:'2',
				quantity: 1,
				status: 'notEntered'
			},
			{
				supplierName: '恰浩花卉',
				phone: '18788571853',
				baseName: '通海基地',
				printStatus:'1',
				quantity: 1,
				status: 'notEntered'
			},
			{
				supplierName: '恰浩花卉',
				phone: '18788571853',
				baseName: '通海基地',
				printStatus:'1',
				quantity: 1,
				status: 'notEntered'
			},
			{
				supplierName: '恰浩花卉',
				phone: '18788571853',
				baseName: '通海基地',
				printStatus:'2',
				quantity: 1,
				status: 'notEntered'
			},
			{
				supplierName: '恰浩花卉',
				phone: '18788571853',
				baseName: '通海基地',
				printStatus:'1',
				quantity: 1,
				status: 'notEntered'
			},
			{
				supplierName: '恰浩花卉',
				phone: '18788571853',
				baseName: '通海基地',
				printStatus:'1',
				quantity: 1,
				status: 'notEntered'
			}
		],
		notEntered: [{
				supplierName: '洋洋花卉(晋宁)',
				phone: '13887478948',
				baseName: '寻甸基地',
				printStatus:'1',
				quantity: 42,
				status: 'notEntered'
			},
			{
				supplierName: '红豆花卉',
				phone: '19808806515',
				baseName: '斗南基地',
				printStatus:'2',
				quantity: 172,
				status: 'notEntered'
			},
			{
				supplierName: '旺旺鲜花',
				phone: '15555367333',
				baseName: '斗南基地',
				printStatus:'1',
				quantity: 318,
				status: 'notEntered'
			}
		],
		entered: [{
				supplierName: '洋洋花卉(晋宁)',
				phone: '13887478948',
				baseName: '寻甸基地',
				printStatus:'1',
				quantity: 42,
				status: 'entered'
			},
			{
				supplierName: '红豆花卉',
				phone: '19808806515',
				baseName: '斗南基地',
				printStatus:'1',
				quantity: 172,
				status: 'entered'
			},
			{
				supplierName: '旺旺鲜花',
				phone: '15555367333',
				baseName: '斗南基地',
				printStatus:'2',
				quantity: 318,
				status: 'entered'
			}
		]
	})

	// 当前显示的数据
	const currentData = computed(() => {
		return supplierData[activeTab.value] || []
	})

	// 获取当前日期
	const getCurrentDate = () => {
		const now = new Date()
		const year = now.getFullYear()
		const month = (now.getMonth() + 1).toString().padStart(2, '0')
		const day = now.getDate().toString().padStart(2, '0')
		return `${year}-${month}-${day}`
	}

	// 显示时间选择器
	const showTimePicker = () => {
		showTimeSelector.value = true
	}

	// 处理时间确认
	const handleTimeConfirm = (date) => {
		selectedDate.value = date
		console.log('时间选择:', date)
	}

	// 处理时间选择器显示状态变化
	const handleTimePickerShow = (show) => {
		showTimeSelector.value = show
	}

	// 处理时间选择器关闭
	const handleTimePickerClose = () => {
		showTimeSelector.value = false
	}

	// 显示区域选择器
	const showAreaPicker = () => {
		showAreaSelector.value = true
	}

	// 处理区域确认
	const handleAreaConfirm = (area) => {
		selectedArea.value = area
	}

	// 处理区域选择器显示状态变化
	const handleAreaPickerShow = (show) => {
		showAreaSelector.value = show
	}

	// 处理区域选择器关闭
	const handleAreaPickerClose = () => {
		showAreaSelector.value = false
	}

	// 切换Tab
	const switchTab = (tab) => {
		activeTab.value = tab
	}
	
	// 取消/确定入场
	const handleEntrance = (item)=>{
		showToast({
			message:`${item.status == 'entered'?'确定要取消入场吗？':'确定要入场吗？'}`,
			showCancel:true,
			data:{
				type:`${item.status == 'entered'?'cancelEntered':'confirmEntered'}`
			}
		})
	}

	// 跳转到供应商详情页面
	const goToSupplierDetail = (item) => {
		uni.navigateTo({
			url: `/pages/supplierDetail/supplierDetail?supplierName=${item.supplierName}&phone=${item.phone}&tag=${item.tag}&quantity=${item.quantity}`
		})
	}

	onMounted(() => {
		// 获取页面参数
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options

		pageParams.type = options.type || 'all'

		// 设置初始Tab
		activeTab.value = pageParams.type

		// 设置默认时间
		selectedDate.value = getCurrentDate()
	})
</script>

<style lang="scss">
	.supplier-list {
		min-height: 100vh;
		background: #fff;

		// 时间选择器区域
		.time-section {
			background: #ffffff;
			// padding: 30rpx;
			margin: 0 24rpx;
			border-radius: 20rpx;
			height: 114rpx;
			line-height: 114rpx;

			.time-search-row {
				display: flex;
				align-items: center;
				gap: 20rpx;
			}

			.search-box {
				flex: 1;
				display: flex;
				align-items: center;
				background: #f5f5f5;
				border-radius: 32rpx;
				padding: 0 30rpx;
				height: 64rpx;
				min-width: 0;
			}

			.area-selector {
				display: flex;
				align-items: center;
				gap: 8rpx;
				flex-shrink: 0;
				cursor: pointer;
			}

			.area-text {
				font-size: 24rpx;
				color: #555;
			}

			.area-arrow {
				font-size: 20rpx;
				color: #555555;
			}

			.divider {
				width: 1px;
				height: 32rpx;
				background: #e5e5e5;
				margin: 0 18rpx;
			}

			.search-icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 12rpx;
				display: block;
				transform: translateY(-1rpx);
			}

			.search-input {
				flex: 1;
				font-size: 24rpx;
				color: #333333;
				background: transparent;
				border: none;
				outline: none;
				min-width: 0;

				&::placeholder {
					color: #A4A4A4;
				}
			}

			.time-selector {
				display: flex;
				align-items: center;
				gap: 8rpx;
				flex-shrink: 0;
				margin-left: 20rpx;
				cursor: pointer;
			}

			.time-text {
				font-size: 24rpx;
				color: #555;
			}

			.time-arrow {
				font-size: 20rpx;
				color: #555555;
			}
		}

		// Tab栏
		.tab-bar {
			background: #ffffff;
			display: flex;
			// border-bottom: 1px solid #f0f0f0;

			.tab-item {
				flex: 1;
				height: 88rpx;
				display: flex;
				// flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;

				.tab-icon {
					width: 27.5rpx;
					height: 25rpx;
					transform: translateX(10rpx) translateY(-16rpx);
				}

				// // 针对不同Tab调整图标位置
				// &:nth-child(1) .tab-icon {
				// 	transform: translateX(-70rpx); // 全部(2222)
				// }

				// &:nth-child(2) .tab-icon {
				// 	transform: translateX(-70rpx); // 未入场(20)
				// }

				// &:nth-child(3) .tab-icon {
				// 	transform: translateX(-90rpx); // 已入场(2202)
				// }

				.tab-text {
					font-size: 28rpx;
					color: #999;
				}

				.tab-indicator {
					position: absolute;
					bottom: 0;
					width: 60rpx;
					height: 4rpx;
					background: #f5564d;
					border-radius: 2rpx;
				}

				&.active .tab-text {
					color: #333;
					font-weight: bold;
				}
			}
		}

		// 表格卡片
		.table-card {
			margin:10rpx 24rpx 0;
			padding-bottom: 24rpx;
			background: #ffffff;
			// border-radius: 20rpx;
			// box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);

			.table {
				// border: 1px solid #F0F0F0;
				// border-radius: 12rpx;
				// overflow: hidden;
				// background: #f8f9fa;

				.table-row {
					display: flex;
					align-items: center;
					gap: 5rpx;
					margin-bottom: 5rpx;
					height: 90rpx;
					&:last-child {
						margin-bottom: 0;
					}

					&.header-row {
						.header-cell {
							color: #f5564d;
							font-size: 24rpx;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 4rpx;
							background: #FFF4F2;
							border: 1rpx solid #FFF4F2;
							overflow: hidden;
							text-align: center;
						}
					}
					.table-cell {
						text-align: center;
						font-size: 24rpx;
						color: #666666;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 4rpx;
						background: #FFFFFF;
						border: 1rpx solid #F0F0F0;
						margin: 0;
						padding: 0 20rpx;
						box-sizing: border-box;
						&:nth-child(1){
							width: 228rpx;
						}
						&:nth-child(2){
							width: 136rpx;
						}
						&:nth-child(3){
							width: 95rpx;
						}
						&:nth-child(4){
							width: 96rpx;
						}
						&:nth-child(5){
							width: 146rpx;
						}
						&.supplier-info {
							.supplier-content {
								display: flex;
								flex-direction: column;
								gap: 8rpx;
								align-items: center;

								.supplier-name {
									color: #333333;
									font-size: 24rpx;
									text-align: center;
								}

								.supplier-phone {
									color: #4298FF;
									font-size: 24rpx;
									text-align: center;
								}
							}
						}

						&.status-cell {
							.status-entered {
								// color: #52c41a;
							}
							.status-not-entered {
								color: #f5564d;
							}
							&.active{
								background-color: #f1f1f1;
							}
						}
					}
				}
			}
		}
	}
</style>